<!--
import { setTimeout } from 'timers';
 * @Author: wangding
 * @Date: 2020-10-23 16:21:28
 * @LastEditTime: 2020-10-28 11:56:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\components\common\baseDrawer.vue
 * ***抽屉
 * 用法：
    <baseDrawer title='菜单名称'>
                *****你需要放进去的内容*****
    </baseDrawer>
  *注释：注意设置列表的宽度，用法在菜单管理里面，可能elementui的table宽度不自动，需手动设置
-->
<template>
<div class="drawer-main-box">
    <transition name="slide-fade">
        <div class="icon-radio" v-if="!show" @click="changeShow">
            <a href="javascript:;" ><i class="el-icon-arrow-right" style="color:#fff;"></i></a>
        </div>
    </transition>
    <transition name="bounce">
        <div class="mian-box" v-if="show">
            <div class="header-box">
                <div>{{title}}</div>
                <a href="javascript:;" @click="changeShow" ><i class="el-icon-arrow-left" style="color:#fff;font-weight: 700;"></i></a>
            </div>
            <div class="content-box">
                <slot></slot>
            </div>
        </div>
    </transition>
</div>
</template>

<script>

export default {
    components: {

    },
    props: {
        title:{
            type:String,
            default:'菜单名称'
        },
    },
    data() {
        return {
            show:true,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    updated(){
    },
    methods: {
      changeShow(){
        this.show = !this.show
        this.$emit('changeShow',this.show)
        // window.setTimeout(()=>{
          
        // },300)
      }
    },
};
</script>

<style  lang="less" scoped>
.drawer-main-box{
    // background-color: #F6F6F6;
    height: 100%;
    .icon-radio{
        position: fixed;
        top: 70px;
        left: 229px;
        z-index: 999;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        padding: 8px;
        border-radius: 0px 50% 50% 0; 
    }
    .mian-box{
        // z-index: 1500;
        position: relative;
        top: -20px;
        left: -20px;
        // margin-left: -20px;
        // margin-top: -20px;
        background-color: #f6f6f6;
        height: 100%;
        width: 200px;
        .header-box{
            background: #5a5a5a;
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #fff;
            font-weight: 700;
            padding: 0px 10px;
            box-sizing: border-box;
        }
        .content-box{
            padding:10px;
            font-size: 14px;
            height: 100%;
        }
}
.bounce-enter-active {
  animation: bounce-in .3s;
}
.bounce-leave-active {
  animation: bounce-in .3s reverse;
}
@keyframes bounce-in {
  0% {
    width: 0px;
  }
  50% {
    width: 260px;
  }
  75% {
    width: 230px;
  }
  100% {
    width: 200px;
  }
}
.slide-fade-enter-active {
  transition: all 1s ease;
}
.slide-fade-leave-active {
  transition: all .1s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(110px);
  opacity: 0;
}
.icon-radio:hover{
    background: rgba(0, 0, 0, .8);
}
}

</style>
